<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="../static/element_ui/index.css"><!--rel="stylesheet"很重要，不加，css不会加载-->
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="form">
            <el-form-item label="起始日期">
                <el-date-picker
                        v-model="form.start"
                        type="datetime"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="截至日期">
                <el-date-picker
                        v-model="form.end"
                        type="datetime"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="状态">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="异常" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDkList">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :v-loading="loading"
        >
            <el-table-column
                    prop="attendDate"
                    label="打卡日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="attendWeek"
                    label="星期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="attendMoring"
                    label="上班打卡">
            </el-table-column>
            <el-table-column
                    prop="attendEvening"
                    label="下班打卡">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="lookInfo(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页里的属性都是必须的。。。。。。。。-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="form.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
            >
            <el-form :inline="false" :model="form">
                <el-form-item label="起始日期">
                    <el-date-picker
                            v-model="editForm.attendMoring"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="截至日期">
                    <el-date-picker
                            v-model="editForm.attendEvening"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editForm.attendAtatus" placeholder="状态">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="异常" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script src="../static/vue/vue.js"></script>
<script src="../static/element_ui/index.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                limit: 10,
                page: 1
            },
            editForm: {},
            tableData: [],
            total: 0,
            loading: false,
            dialogVisible: false
        },
        methods: {
            handleSizeChange(val) {
                this.form.limit = val;
                this.getDkList();
            },
            handleCurrentChange(val) {
                this.form.page = val;
                this.getDkList();
            },
            getDkList: function() {
                console.log(this.form);
                this.loading = true;
                $.ajax({
                    url: '/attend/getDk',
                    type: 'post',
                    data: this.form,
                    dataType: 'json',
                    success: data => {
                        console.log(data);
                        this.tableData = data.data.list;
                        this.total = data.data.total;
                        this.loading = false;
                    },
                    error: data => {
                        this.$message({
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                });
            },
            lookInfo: function (row) {
                console.log(row);
                this.editForm = row;
                this.dialogVisible = true;
            },
            editRow: function () {
                $.ajax({
                    url: '/attend/save',
                    type: 'post',
                    data: this.editForm,
                    dataType: 'json',
                    success: data => {
                        console.log(data);
                        if(data.code == 00){
                            this.getDkList();
                        }
                    },
                    error: data => {
                        this.$message({
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                });
                this.dialogVisible = false;
            },
            delRow: function (row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: '/attend/del',
                        type: 'get',
                        data: row,
                        dataType: 'json',
                        success: data => {
                            console.log(data);
                            if(data.code == 00){
                                this.getDkList();
                            }
                        },
                        error: data => {
                            this.$message({
                                message: data.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created: function () {
//            this.getDkList();
        }
    });
</script>
</html>